<!-- 进口放箱历史记录 -->
<template>
  <div class="import-box-man-history" v-loading="loadingView"
      element-loading-text="正在加载..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.1)">
    <!-- 查询 -->
    <el-row :gutter="15">
      <el-col :span="24">
        <!-- <div style="margin-left: 20px;">
          <el-link type="primary" href="http://101.89.161.32:9200/" target="_blank">中海</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.chinasailing.com.cn/bkplan" target="_blank">航华</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://cloud.easipass.com/ols/home.do#" target="_blank">亿通网</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://service.chinaconcord.com:8080/ShippingAgency/PrePlan/PrePlanQuery?TEMPDATAID=E0000D630MZSBM6XB" target="_blank">中和</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.hmm21.com/cms/business/ebiz/trackTrace/trackTrace/index.jsp" target="_blank">现代</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://202.136.213.238:8080/ShipSuiteWeb/bi/index.htm" target="_blank">海华</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://op.jjshipping.cn/sheir/index-nav.jsp?tdsourcetag=s_pcqq_aiomsg" target="_blank">锦诚</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://sun-dial.com/sundial/control/query" target="_blank">顺德</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.newseas-agent.com/jsFrame/websites/EtrSelect.jsp" target="_blank">新海</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.cma-cgm.com/" target="_blank">达飞</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://elines.coscoshipping.com/ebusiness/" target="_blank">中远</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.sinoagentsh.com/Query/Expdo.aspx" target="_blank">外运</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.penavico.sh.cn/proxy/proxy_query.jsp?tab=tab-2#" target="_blank">外代</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://61.181.252.146:10091/html/swpt/index" target="_blank">振华</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.unisco.com.cn/" target="_blank">联合</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://q.cpsa.net.cn/ckfxcdcx" target="_blank">华港</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://www.chinasailing.com.cn/?tdsourcetag=s_pcqq_aiomsg" target="_blank">航华登录</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://web.lindomsc.com/login.aspx" target="_blank">联东</el-link>
          <el-link style="margin-left: 10px;" type="primary" href="http://e-sinotrans.sinotrans.com/services/login.action" target="_blank">外运放箱网</el-link>
        </div> -->
        <el-form :model="Data" size="mini" :inline="true" class="demo-form-inline">
          <div>
          <el-form-item>
            <el-date-picker v-model="Data.applyDate" unlink-panels style="width: 210px;" type="daterange" @change="applyDateChange"  value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.shipAgencyName" @change="shipAgencyNameChange" @clear="clearContent" clearable filterable placeholder="船代选择">
              <el-option
                v-for="item in shipAgencyNameOptions"
                :key="item.text"
                :label="item.text"
                :value="item.shipAgencyId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.company" @change="companyChange" @clear="clearContent" clearable filterable placeholder="船公司选择">
              <el-option
                v-for="item in chuangongshiOptions"
                :key="item.nameCncode"
                :label="item.nameCncode"
                :value="item.boatComId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.customerName" @change="custormerChange" @clear="clearContent" filterable clearable placeholder="用箱人选择">
              <el-option
                v-for="item in customerNameOptions"
                :key="item.FullName"
                :label="item.search"
                :value="item.UserId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="Data.boxState" @change="searOneSeach()" placeholder="状态选择">
              <el-option value="-1" label="全部显示"></el-option>
              <el-option value="2" label="已完成"></el-option>
              <el-option value="16" label="已对单"></el-option>
              <el-option value="7" label="退关"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
              <el-select v-model="Data.boxFeeStatus" @change="searOneSeach()" placeholder="请选择结账状态">
                <el-option label="全部" value="-1"></el-option>
                <el-option label="未结账" value="1"></el-option>
                <el-option label="结账中" value="2"></el-option>
                <el-option label="已结账" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
            <el-input v-model="Data.putBoxNote" placeholder="请输入放箱备注"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="Data.blno" placeholder="请输入提单号"></el-input>
          </el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="searOneSeach"></el-button>
          <el-button size="mini" @click="clearSeach">清空</el-button>
          </div>
          <div style="margin-bottom: 5px;">
          <el-button size="mini" type="warning" @click="setDetails">设置费用</el-button>
          <el-button size="mini" type="danger" @click="opMatchOrder(16)">对单</el-button>
          <el-button size="mini" type="warning" @click="opMatchOrder(0)">回退</el-button>
          <el-button size="mini" type="success" @click="opMatchOrder(7)">退关</el-button>
          <el-button size="mini" type="primary" @click="getEirInfo">获取EIR</el-button>
          <el-button size="mini" type="primary" @click="changeOrder">派单</el-button>
          <el-button v-if="userType === '7'" type="primary" size="mini" @click="viewStatistics">查看统计</el-button>
          <el-button v-else type="primary" size="mini" @click="viewStatistics">查看统计</el-button>
          <el-button v-if="userType === '7'" type="primary" size="mini" @click="exportDataClick">日账单</el-button>
          <el-button v-if="userType === '7'" type="success" size="mini" @click="lockUnlock(1)">全部锁定</el-button>
          <el-button v-if="userType === '7'" type="warning" size="mini" @click="lockUnlock(0)">全部解锁</el-button>
          <el-button v-if="userType === '7'" type="success" size="mini" @click="lockUnlock(2)">部分锁定</el-button>
          <el-button v-if="userType === '7'" type="warning" size="mini" @click="lockUnlock(3)">部分解锁</el-button>
          <el-button size="mini" type="danger" @click="modGMoreFeeStatus(1)">未结账</el-button>
          <el-button size="mini" type="warning" @click="modGMoreFeeStatus(2)">结账中</el-button>
          <el-button size="mini" type="success" @click="modGMoreFeeStatus(0)">已结账</el-button>
          <el-button size="mini" @click="cvodFee" type="primary">保存费用</el-button>
          <el-button type="primary" size="mini" @click="tableSetting">列表设置</el-button>
          </div>
          <el-dialog width="600px" class top="6vh" title="查看统计" :visible="viewStatisticsVisible" @close="close">
            <div style="margin-top: 5px; font-size: medium;">共【{{total}}】单</div>
            <span style="font-size: 16px;">费用</span>
            <div style="font-size: medium;">
              <span>【提箱费：{{statisticsData.txFee}}】</span>
              <span>【打单费：{{statisticsData.singleFee}}】</span>
              <span>【中理货费：{{statisticsData.securityFee}}】</span>
              <span>【外理货费：{{statisticsData.outsideTally}}】</span>
              <span>【港建费：{{statisticsData.portCharge}}】</span>
              <span>【港杂费：{{statisticsData.portHand}}】</span>
              <span>【服务费：{{statisticsData.serviceFee}}】</span>
              <span>【快递费：{{statisticsData.courierFee}}】</span>
              <span>【台头费：{{statisticsData.headFee}}】</span>
              <span>【计划费：{{statisticsData.planFee}}】</span>
              <span>【滞纳金：{{statisticsData.overdueFine}}】</span>
              <span>【其他：{{statisticsData.restFee}}】</span>
              <span>【超期费：{{statisticsData.containerFee}}】</span>
              <span>【坏污箱费：{{statisticsData.suitcaseFee}}】</span>
            </div>
            <span style="font-size: 16px;">船代费用</span>
            <div style="font-size: medium;">
              <span>【提箱费：{{statisticsData.shiptxFee}}】</span>
              <span>【打单费：{{statisticsData.shipSingleFee}}】</span>
              <span>【中理货费：{{statisticsData.shipSecurityFee}}】</span>
              <span>【外理货费：{{statisticsData.shipOutsideTally}}】</span>
              <span>【港建费：{{statisticsData.shipPortCharge}}】</span>
              <span>【港杂费：{{statisticsData.shipPortHand}}】</span>
              <span>【服务费：{{statisticsData.shipServiceFee}}】</span>
              <span>【快递费：{{statisticsData.shipCourierFee}}】</span>
              <span>【台头费：{{statisticsData.shipHeadFee}}】</span>
              <span>【计划费：{{statisticsData.shipPlanFee}}】</span>
              <span>【滞纳金：{{statisticsData.shipOverdueFine}}】</span>
              <span>【其他：{{statisticsData.shipRestFee}}】</span>
              <span>【超期费：{{statisticsData.shipContainerFee}}】</span>
              <span>【坏污箱费：{{statisticsData.shipSuitcaseFee}}】</span>
            </div>
            <div style="margin-top: 5px; font-size: medium;">
              <span>【合计收入：{{statisticsData.totalRevenue}}】</span>
              <span>【合计支出：{{statisticsData.totalSpend}}】</span>
              <span>【利润：{{statisticsData.profits}}】</span>
            </div>
            <div style="margin-top: 5px; font-size: medium;">
              <span>【箱量合计：{{sunNum}}】</span>
              <span v-for="item in statisticsType">【{{item.type}}：{{item.num}}】</span>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button type="info" @click="close" size="mini">关 闭</el-button>
            </div>
          </el-dialog>
          <el-dialog width="600px" class top="6vh" title="查看统计" :visible="viewStatisticsTVisible" @close="closeT">
            <div style="margin-top: 5px; font-size: medium;">共【{{total}}】单</div>
            <span style="font-size: 16px;">船代费用</span>
            <div style="font-size: medium;">
              <span>【提箱费：{{statisticsData.shiptxFee}}】</span>
              <span>【打单费：{{statisticsData.shipSingleFee}}】</span>
              <span>【中理货费：{{statisticsData.shipSecurityFee}}】</span>
              <span>【外理货费：{{statisticsData.shipOutsideTally}}】</span>
              <span>【港建费：{{statisticsData.shipPortCharge}}】</span>
              <span>【港杂费：{{statisticsData.shipPortHand}}】</span>
              <span>【服务费：{{statisticsData.shipServiceFee}}】</span>
              <span>【快递费：{{statisticsData.shipCourierFee}}】</span>
              <span>【台头费：{{statisticsData.shipHeadFee}}】</span>
              <span>【计划费：{{statisticsData.shipPlanFee}}】</span>
              <span>【滞纳金：{{statisticsData.shipOverdueFine}}】</span>
              <span>【其他：{{statisticsData.shipRestFee}}】</span>
              <span>【超期费：{{statisticsData.shipContainerFee}}】</span>
              <span>【坏污箱费：{{statisticsData.shipSuitcaseFee}}】</span>
            </div>
            <div style="margin-top: 5px; font-size: medium;">
              <span>【箱量合计：{{sunNum}}】</span>
              <span v-for="item in statisticsType">【{{item.type}}：{{item.num}}】</span>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button type="info" @click="closeT" size="mini">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- <el-form-item label="业务员">
            <el-input v-model="Data.theOperatorId"></el-input>
          </el-form-item> -->
        </el-form>
      </el-col>

      <!-- </el-col> -->
    </el-row>
    <!-- 表格 -->
    <el-table :cell-style="tableRowClass" :height="tableHeight" highlight-current-row :row-class-name="tableRowClassName" :header-cell-style="tableheaderClassName" @cell-click="setmySales" @cell-dblclick="dbTableClick" :data="tableData" border @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="35">
      </el-table-column>
      <el-table-column v-for="item in myfieldList" :prop="item.props" :key="item.id" :width="item.width" :label="item.field">
        <template slot-scope="scope">
          <div v-if="item.props === 'clientName'">
            <el-popover
              placement="right"
              width="200"
              trigger="click">
              <div>
                <h4 style="display: inline-block; font: bold">联系方式:</h4> {{scope.row.userInfo[0].mobile2}}
              </div>
              <div>
                <h4 style="display: inline-block; font: bold">电话:</h4> {{scope.row.userInfo[0].phone1}}
              </div>
              <div>
                <h4 style="display: inline-block; font: bold">手机:</h4> {{scope.row.userInfo[0].mobile1}}
              </div>
              <div>
                <h4 style="display: inline-block; font: bold">QQ:</h4> {{scope.row.userInfo[0].qq}}
              </div>
              <div>
                <h4 style="display: inline-block; font: bold">传真:</h4> {{scope.row.userInfo[0].fax}}
              </div>
              <div>
                <h4 style="display: inline-block; font: bold">地址:</h4> {{scope.row.userInfo[0].address}}
              </div>
              <el-button style="padding: 0px;" type="text" slot="reference">{{scope.row.clientName}}</el-button>
            </el-popover>
          </div>
          <div v-else-if="item.props === 'mome'">
            <el-popover
            placement="top"
            width="300"
            trigger="click">
            <div>
              <h4 style="display: inline-block; font: bold"> {{scope.row.mome}}</h4>
            </div>
            <el-button style="padding: 0px;" type="text" slot="reference">{{scope.row.mome | ellipsis}}</el-button>
          </el-popover>
          </div>
          <div v-else-if="item.props === 'putBoxNote'">
            {{scope.row.putBoxNote | ellipsis}}
          </div>
          <div v-else-if="item.props === 'ddf'">
            <el-input @blur="changeFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.ddf"></el-input>
          </div>
          <div v-else-if="item.props === 'fwf'">
            <el-input @blur="changeFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.fwf"></el-input>
          </div>
          <div v-else-if="item.props === 'zlhf'">
            <el-input @blur="changeFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.zlhf"></el-input>
          </div>
          <div v-else-if="item.props === 'wlhf'">
            <el-input @blur="changeFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.wlhf"></el-input>
          </div>
          <div v-else-if="item.props === 'gjf'">
            <el-input @blur="changeFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.gjf"></el-input>
          </div>
          <div v-else-if="item.props === 'gzf'">
            <el-input @blur="changeFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.gzf"></el-input>
          </div>
          <div v-else-if="item.props === 'kdf'">
            <el-input @blur="changeFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.kdf"></el-input>
          </div>
          <div v-else-if="item.props === 'cqf'">
            <el-input @blur="changeFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.cqf"></el-input>
          </div>
          <div v-else-if="item.props === 'hwxf'">
            <el-input @blur="changeFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.hwxf"></el-input>
          </div>
          <div v-else-if="item.props === 'ttf'">
            <el-input @blur="changeFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.ttf"></el-input>
          </div>
          <div v-else-if="item.props === 'jhf'">
            <el-input @blur="changeFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.jhf"></el-input>
          </div>
          <div v-else-if="item.props === 'znj'">
            <el-input @blur="changeFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.znj"></el-input>
          </div>
          <div v-else-if="item.props === 'txf'">
            <el-input @blur="changeFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.txf"></el-input>
          </div>
          <div v-else-if="item.props === 'qt'">
            <el-input @blur="changeFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.qt"></el-input>
          </div>
          <div v-else-if="item.props === 'costDdf'">
            <el-input @blur="changeCostFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.costDdf"></el-input>
          </div>
          <div v-else-if="item.props === 'costFwf'">
            <el-input @blur="changeCostFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.costFwf"></el-input>
          </div>
          <div v-else-if="item.props === 'costZlhf'">
            <el-input @blur="changeCostFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.costZlhf"></el-input>
          </div>
          <div v-else-if="item.props === 'costWlhf'">
            <el-input @blur="changeCostFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.costWlhf"></el-input>
          </div>
          <div v-else-if="item.props === 'costGjf'">
            <el-input @blur="changeCostFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.costGjf"></el-input>
          </div><div v-else-if="item.props === 'costGzf'">
            <el-input @blur="changeCostFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.costGzf"></el-input>
          </div>
          <div v-else-if="item.props === 'costKdf'">
            <el-input @blur="changeCostFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.costKdf"></el-input>
          </div>
          <div v-else-if="item.props === 'costCqf'">
            <el-input @blur="changeCostFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.costCqf"></el-input>
          </div>
          <div v-else-if="item.props === 'costHwxf'">
            <el-input @blur="changeCostFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.costHwxf"></el-input>
          </div>
          <div v-else-if="item.props === 'costTtf'">
            <el-input @blur="changeCostFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.costTtf"></el-input>
          </div>
          <div v-else-if="item.props === 'costJhf'">
            <el-input @blur="changeCostFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.costJhf"></el-input>
          </div>
          <div v-else-if="item.props === 'costZnj'">
            <el-input @blur="changeCostFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.costZnj"></el-input>
          </div>
          <div v-else-if="item.props === 'costTxf'">
            <el-input @blur="changeCostFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.costTxf"></el-input>
          </div>
          <div v-else-if="item.props === 'costQt'">
            <el-input @blur="changeCostFee(scope.row)" :disabled="item.isLock === 1" style="width: 80px;" v-model="scope.row.costQt"></el-input>
          </div>
          <div v-else-if="item.props === 'sumMoney'">
            <el-popover
              placement="right"
              width="200"
              trigger="click">
              <el-table :data="scope.row.feedata">
                <el-table-column width="100" property="feeName" label="费用"></el-table-column>
                <el-table-column width="100" property="money" label="金额"></el-table-column>
              </el-table>
              <el-button style="padding: 0px;" type="text" slot="reference">{{scope.row.sumMoney}}</el-button>
            </el-popover>
          </div>
          <div v-else-if="item.props === 'shipAgencyFee'">
            <el-popover
              placement="right"
              width="200"
              trigger="click">
              <el-table :data="scope.row.shipFee">
                <el-table-column width="100" property="feeName" label="费用"></el-table-column>
                <el-table-column width="100" property="money" label="金额"></el-table-column>
              </el-table>
              <el-button style="padding: 0px;" type="text" slot="reference">{{scope.row.shipAgencyFee}}</el-button>
            </el-popover>
          </div>
          <div v-else-if="item.props === 'eirNo'">
            <div v-if="scope.row.eirNo.length > 1">
              <el-popover placement="left" width="200" trigger="click">
                <div style="font: 15px bold; margin-top: 5px;" v-for="item in scope.row.eirNo">
                  {{item.receiptNo}}
                </div>
                <el-button style="padding: 0px;" type="text" slot="reference">{{scope.row.eirNo.length}}个eirNo</el-button>
              </el-popover>
            </div>
            <div v-else-if="scope.row.eirNo.length === 1">
              {{scope.row.eirNo[0].receiptNo}}
            </div>
          </div>
          <div v-else>
            {{tableData[scope.$index][item.props]}}
          </div>
        </template>
      </el-table-column>
      <el-table-column width="60px" align="center" label="操作">
        <template slot-scope="scope">
          <el-popover
            v-if="scope.row.putBoxFileList.length != 0"
            placement="left"
            width="100"
            trigger="click">
            <div v-for="item in scope.row.putBoxFileList">
              <el-button icon="el-icon-s-order" type="primary" size="mini" @click="lookFiles(item)"></el-button>
              <el-dialog :append-to-body="true" width="800px" title="查看上传文件" :visible.sync="filesView">
                <embed :src="filesImg" type="application/pdf" width="100%" height="600px">
                <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="filesView = false">关 闭</el-button>
                </div>
              </el-dialog>
              <el-dialog :append-to-body="true" width="800px" title="查看上传文件" :visible.sync="filesImgView">
                <!-- <embed :src="filesImg" type="application/pdf" width="100%" height="600px"> -->
                <img :src="filesImgSrc" alt="">
                <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="filesImgView = false">关 闭</el-button>
                </div>
              </el-dialog>
              <el-button icon="el-icon-delete" type="danger" size="mini" @click="dargerFiles(item)"></el-button>
            </div>
            <el-button slot="reference" style="padding: 0px;" type="primary" size="small" icon="el-icon-s-order"></el-button>
          </el-popover>
          <el-upload style="display: inline-block;" action="http://fx.api.ypt56.net/api/uploadFile" :show-file-list="false" :data="uploadData" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
            <el-button style="padding: 0px;" type="primary" size="small" icon="el-icon-upload" @click="uploadFiles(scope.$index, scope.row)" ></el-button>
          </el-upload>
        </template>
      </el-table-column>
    </el-table>
    <el-popover placement="top" ref="operationPopover" v-model="showPopover">
      <el-input v-if="modStatus === 1" type="textarea" style="width: 380px" filterable v-model="modPutBoxNote" placeholder="请输入放箱备注" ></el-input>
      <el-select v-if="modStatus === 2" @change="yardChange" style="width: 160px" v-model="modYard" filterable placeholder="请输入送箱点">
        <el-option
          v-for="item in yardOptions"
          :key="item.nameCode"
          :label="item.nameCode"
          :value="item.yardName"
        ></el-option>
      </el-select>
      <el-date-picker v-if="modStatus === 3" value-format="yyyy-MM-dd" style="width: 150px" v-model="modSheetTime" type="date" placeholder="选择日期时间"></el-date-picker>
      <el-select v-if="modStatus === 4" size="mini" style="width: 150px;" v-model="modBoxFeeStatus" placeholder="请选择结账状态">
        <el-option label="未结账" value="1"></el-option>
        <el-option label="结账中" value="2"></el-option>
        <el-option label="已结账" value="0"></el-option>
      </el-select>
      <el-input v-if="modStatus === 5" type="text" style="width: 150px" filterable v-model="modPCode" placeholder="请输入交单码"></el-input>
      <div v-if="modStatus === 1" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="setPutBoxNote()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
      <div v-else-if="modStatus === 2" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="modGYard()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
      <div v-else-if="modStatus === 3" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="modUpTime()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
      <div v-else-if="modStatus === 4" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="modGBoxFeeStatus()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
      <div v-else-if="modStatus === 5" style="text-align: right; margin: 0; display: inline-block;">
        <el-button size="mini" type="primary" icon="el-icon-check" @click="modGPCode()"></el-button>
        <el-button size="mini" icon="el-icon-close" @click="closePopoverHandler"></el-button>
      </div>
    </el-popover>
    <!--分页-->
      <div style=" width: 100%; margin: 0 auto;">
        <el-pagination layout="total,prev,pager,next,sizes" :page-size="limit" :total="total" :page-sizes="[30, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
      </div>
      <details-dialog :visible="detailsView" @visibleChange="detailsViewVisibleChange" :table-index-data="selectedTableDataAlone" @getTableData="searSeach"></details-dialog>
      <!-- 设置列表 -->
      <list-setting-dialog :table-props="fieldList" :pageName="pageName" :open="open" @close="closeL"></list-setting-dialog>
  </div>
</template>

<script>
import {
  histtoryImportList,
  boatCompanyList,
  importUpdatePutBoxNote,
  yardList,
  importUpdateYard,
  singleTime,
  importMatchOrder,
  userInfo,
  importLockUnlock,
  SearchUserInfo,
  shipAgencyList,
  importStatistics,
  exportData,
  getreceiptNo,
  shipCompanyList,
  transferBill,
  importExecelData,
  updatepCode,
  // updateImportPutBoxCost,
  updateMoreImportPutBoxCost,
  delPutBoxFile
} from './api/importPutBox'
import {
  getField,
  setputBoxFieldOrder
} from '../finance/api/finance'
import util from '@util'
import moment from 'moment'
import DetailsDialog from './dialog/importDetailsDialog.vue'
import ListSettingDialog from '../shared/ListSettingDialog'
export default {
  components: {
    DetailsDialog,
    ListSettingDialog
  },
  data () {
    return {
      Data: {
        applyDate: [],
        boxState: '-1',
        boxFeeStatus: '-1'
      },
      tableData: [],
      exportDataHear: [],
      shipAgencyNameOptions: [],
      selectedTableData: [],
      selectedTableDataAlone: {},
      yardOptions: [],
      modRow: {},
      uploadData: {},
      chuangongshiOptions: [],
      customerNameOptions: [],
      statisticsData: [],
      statisticsType: [],
      shipBoatEirAndList: [],
      shipBoatList: [],
      fieldList: [],
      sunNum: 0,
      pageName: '',
      eirShip: '',
      eirCompany: '',
      eirCode: '',
      eirData: '',
      modPutBoxNote: '',
      eirShipId: '',
      modSheetTime: '',
      modYard: '',
      modYardId: '',
      modBoxFeeStatus: '',
      modPCode: '',
      filesImg: '',
      filesImgSrc: '',
      tableHeight: 0,
      key: false,
      filesView: false,
      filesImgView: false,
      showPopover: false,
      detailsView: false,
      viewStatisticsVisible: false,
      viewStatisticsTVisible: false,
      open: false,
      // eirInfoVisible: false,
      loadingView: false,
      modStatus: '',
      cacheId: '', // 缓存辨识ID
      cacheColumnLabel: '', // 缓存表头文本
      limit: 30,
      total: 0,
      page: 1,
      userType: ''
    }
  },
  computed: {
    myfieldList: function () {
      return this.fieldList.filter(function (value) {
        return value.isShow === true
      })
    }
  },
  async mounted () {
    this.getSettingList('进口放箱汇总')
    this.Data.applyDate = [moment(new Date()).format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD')]
    this.gitBoxHistoryData()
    setTimeout(() => {
      this.tableHeight = 564
    }, 300)
    const user = util.getItem('$user_fx')
    Object.assign(this.uploadData, {
      un: user.un,
      rtk: user.rtk,
      uid: user.uid,
      Picture: '',
      userCode: '',
      type: ''
    })
  },
  methods: {
    lookFiles (row) {
      if (row.fileType === 0) {
        this.filesImg = row.putBoxfile
        this.filesView = true
      } else {
        this.filesImgSrc = row.putBoxfile
        this.filesImgView = true
      }
    },
    async dargerFiles (row) {
      let res = await delPutBoxFile({
        putBoxFileId: row.putBoxFileId
      })
      if (res.status === 200) {
        this.$notify({
          title: '删除成功',
          message: '删除成功',
          type: 'success'
        })
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg
        })
      }
    },
    uploadFiles (a, b) {
      this.uploadData.userCode = b.userCode
      this.uploadData.type = b.type
    },
    beforeAvatarUpload (file) {
      this.uploadData.Picture = file
    },
    handleAvatarSuccess (res, file) {
      if (res.status === 200) {
        this.$notify({
          title: '上传成功',
          message: '上传成功',
          type: 'success'
        })
        this.searSeach()
      }
    },
    async cvodFee () {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '保存失败',
          message: '请选择数据!'
        })
      } else {
        let res = await updateMoreImportPutBoxCost({
          feeList: this.selectedTableData
        })
        if (res.status === 200) {
          this.$notify({
            title: '保存成功',
            message: '保存成功',
            type: 'success'
          })
          this.serachTableData()
        } else {
          this.$notify.error({
            title: '保存失败',
            message: res.msg
          })
        }
      }
    },
    tableheaderClassName ({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'ddf') {
        return 'color: red'
      }
      if (column.property === 'fwf') {
        return 'color: red'
      }
      if (column.property === 'zlhf') {
        return 'color: red'
      }
      if (column.property === 'wlhf') {
        return 'color: red'
      }
      if (column.property === 'gjf') {
        return 'color: red'
      }
      if (column.property === 'gzf') {
        return 'color: red'
      }
      if (column.property === 'kdf') {
        return 'color: red'
      }
      if (column.property === 'cqf') {
        return 'color: red'
      }
      if (column.property === 'hwxf') {
        return 'color: red'
      }
      if (column.property === 'ttf') {
        return 'color: red'
      }
      if (column.property === 'jhf') {
        return 'color: red'
      }
      if (column.property === 'znj') {
        return 'color: red'
      }
      if (column.property === 'txf') {
        return 'color: red'
      }
      if (column.property === 'qt') {
        return 'color: red'
      }
      if (column.property === 'costDdf') {
        return 'color: blue'
      }
      if (column.property === 'costFwf') {
        return 'color: blue'
      }
      if (column.property === 'costZlhf') {
        return 'color: blue'
      }
      if (column.property === 'costWlhf') {
        return 'color: blue'
      }
      if (column.property === 'costGjf') {
        return 'color: blue'
      }
      if (column.property === 'costGzf') {
        return 'color: blue'
      }
      if (column.property === 'costKdf') {
        return 'color: blue'
      }
      if (column.property === 'costCqf') {
        return 'color: blue'
      }
      if (column.property === 'costHwxf') {
        return 'color: blue'
      }
      if (column.property === 'costTtf') {
        return 'color: blue'
      }
      if (column.property === 'costJhf') {
        return 'color: blue'
      }
      if (column.property === 'costZnj') {
        return 'color: blue'
      }
      if (column.property === 'costTxf') {
        return 'color: blue'
      }
      if (column.property === 'costQt') {
        return 'color: blue'
      }
    },
    async changeFee (row) {
      row.feedata.map((item, index, arr) => {
        if (item.feeName === '打单费') {
          item.money = row.ddf
        }
        if (item.feeName === '服务费') {
          item.money = row.fwf
        }
        if (item.feeName === '中理货费') {
          item.money = row.zlhf
        }
        if (item.feeName === '外理货费') {
          item.money = row.wlhf
        }
        if (item.feeName === '港建费') {
          item.money = row.gjf
        }
        if (item.feeName === '港杂费') {
          item.money = row.gzf
        }
        if (item.feeName === '快递费') {
          item.money = row.kdf
        }
        if (item.feeName === '其他') {
          item.money = row.qt
        }
        if (item.feeName === '超期费') {
          item.money = row.cqf
        }
        if (item.feeName === '坏污箱费') {
          item.money = row.hwxf
        }
        if (item.feeName === '台头费') {
          item.money = row.ttf
        }
        if (item.feeName === '计划费') {
          item.money = row.jhf
        }
        if (item.feeName === '滞纳金') {
          item.money = row.znj
        }
        if (item.feeName === '提箱费') {
          item.money = row.txf
        }
      })
      row.shipFee.map((item, index, arr) => {
        if (item.feeName === '打单费') {
          item.money = row.costDdf
        }
        if (item.feeName === '服务费') {
          item.money = row.costFwf
        }
        if (item.feeName === '中理货费') {
          item.money = row.costZlhf
        }
        if (item.feeName === '外理货费') {
          item.money = row.costWlhf
        }
        if (item.feeName === '港建费') {
          item.money = row.gjf
        }
        if (item.feeName === '港杂费') {
          item.money = row.gzf
        }
        if (item.feeName === '快递费') {
          item.money = row.costKdf
        }
        if (item.feeName === '其他') {
          item.money = row.costQt
        }
        if (item.feeName === '超期费') {
          item.money = row.cqf
        }
        if (item.feeName === '坏污箱费') {
          item.money = row.hwxf
        }
        if (item.feeName === '台头费') {
          item.money = row.costTtf
        }
        if (item.feeName === '计划费') {
          item.money = row.costJhf
        }
        if (item.feeName === '滞纳金') {
          item.money = row.znj
        }
        if (item.feeName === '提箱费') {
          item.money = row.costTxf
        }
      })
      // let res = await updateImportPutBoxCost({
      //   userCode: row.userCode,
      //   boxCostList: row.feedata,
      //   shipFee: row.shipFee
      // })
      // if (res.status === 200) {
      //   this.$notify({
      //     title: '修改成功',
      //     message: '修改成功',
      //     type: 'success'
      //   })
      //   this.searSeach()
      // } else {
      //   this.$notify.error({
      //     title: '修改失败',
      //     message: res.msg
      //   })
      // }
    },
    async changeCostFee (row) {
      row.shipFee.map((item, index, arr) => {
        if (item.feeName === '打单费') {
          item.money = row.costDdf
        }
        if (item.feeName === '服务费') {
          item.money = row.costFwf
        }
        if (item.feeName === '中理货费') {
          item.money = row.costZlhf
        }
        if (item.feeName === '外理货费') {
          item.money = row.costWlhf
        }
        if (item.feeName === '港建费') {
          item.money = row.costGjf
        }
        if (item.feeName === '港杂费') {
          item.money = row.costGzf
        }
        if (item.feeName === '快递费') {
          item.money = row.costKdf
        }
        if (item.feeName === '其他') {
          item.money = row.costQt
        }
        if (item.feeName === '超期费') {
          item.money = row.costCqf
        }
        if (item.feeName === '坏污箱费') {
          item.money = row.costHwxf
        }
        if (item.feeName === '台头费') {
          item.money = row.costTtf
        }
        if (item.feeName === '计划费') {
          item.money = row.costJhf
        }
        if (item.feeName === '滞纳金') {
          item.money = row.costZnj
        }
        if (item.feeName === '提箱费') {
          item.money = row.costTxf
        }
      })
      row.feedata.map((item, index, arr) => {
        if (item.feeName === '港建费') {
          item.money = row.costGjf
        }
        if (item.feeName === '港杂费') {
          item.money = row.costGzf
        }
        if (item.feeName === '超期费') {
          item.money = row.costCqf
        }
        if (item.feeName === '坏污箱费') {
          item.money = row.costHwxf
        }
        if (item.feeName === '滞纳金') {
          item.money = row.costZnj
        }
      })
      // let res = await updateImportPutBoxCost({
      //   userCode: row.userCode,
      //   boxCostList: row.feedata,
      //   shipFee: row.shipFee
      // })
      // if (res.status === 200) {
      //   this.$notify({
      //     title: '修改成功',
      //     message: '修改成功',
      //     type: 'success'
      //   })
      //   this.searSeach()
      // } else {
      //   this.$notify.error({
      //     title: '修改失败',
      //     message: res.msg
      //   })
      // }
    },
    // 批量修改对账状态
    async modGMoreFeeStatus (a) {
      let res = await updatepCode({
        boxFeeStatus: a,
        type: this.modRow.type,
        codeList: this.selectedTableData
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success'
        })
        this.searSeach()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg
        })
      }
    },
    // 修改对账状态
    async modGBoxFeeStatus () {
      let tableDatas = []
      tableDatas.push(this.modRow)
      let res = await updatepCode({
        boxFeeStatus: this.modBoxFeeStatus,
        type: this.modRow.type,
        codeList: tableDatas
        // userCode: this.modRow.userCode
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success'
        })
        tableDatas.pop()
        this.closePopoverHandler()
        this.searSeach()
      } else {
        tableDatas.pop()
        this.$notify.error({
          title: '修改失败',
          message: res.msg
        })
      }
    },
    // 修改交接单
    async modGPCode () {
      let tableDatas = []
      tableDatas.push(this.modRow)
      let res = await updatepCode({
        pCode: this.modPCode,
        codeList: tableDatas
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success'
        })
        tableDatas.pop()
        this.closePopoverHandler()
        this.searSeach()
      } else {
        tableDatas.pop()
        this.$notify.error({
          title: '修改失败',
          message: res.msg
        })
      }
    },
    // 转单
    async changeOrder () {
      let res = await transferBill({
        userCode: this.selectedTableData
      })
      this.loadingView = true
      if (res.status === 200) {
        this.loadingView = false
        this.$notify({
          title: '获取成功',
          message: '获取成功',
          type: 'success'
        })
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '获取失败',
          message: res.msg
        })
      }
    },
    // 获取EIR
    // async getEirClick () {
    //   let res = await getreceiptNo({
    //     billNbr: this.selectedTableData[0].blno,
    //     type: this.selectedTableData[0].type,
    //     trustCode: this.eirCode,
    //     shipAgencyId: this.eirShipId,
    //     imo: 1
    //   })
    //   this.loadingView = true
    //   if (res.status === 200) {
    //     this.loadingView = false
    //     this.$notify({
    //       title: '获取成功',
    //       message: '获取成功',
    //       type: 'success'
    //     })
    //     this.searSeach()
    //   } else {
    //     this.loadingView = false
    //     this.$notify.error({
    //       title: '获取失败',
    //       message: res.msg
    //     })
    //   }
    // },
    // 获取关联船代船公司
    async getBoatAndBoatT () {
      let res = await shipCompanyList({
        import: 1
      })
      this.shipBoatList = res.data
    },
    // 获取EIR弹窗
    async getEirInfo () {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '设置失败',
          message: '请选择一条数据!'
        })
      } else if (this.selectedTableData.length === 1) {
        this.loadingView = true
        let res = await getreceiptNo({
          billNbr: this.selectedTableData[0].blno,
          type: this.selectedTableData[0].type,
          imo: 1,
          shipAgencyId: this.selectedTableData[0].shipAgencyId,
          boatAgentId: this.selectedTableData[0].boatAgentId,
          status: this.selectedTableData[0].orderStatus
        })
        if (res.status === 200) {
          this.loadingView = false
          this.$notify({
            title: '获取成功',
            message: '获取成功',
            type: 'success'
          })
          this.searSeach()
        } else {
          this.loadingView = false
          this.$notify.error({
            title: '获取失败',
            message: res.msg
          })
        }
      } else {
        this.$notify.error({
          title: '设置失败',
          message: '只能选择一条数据哦!'
        })
      }
    },
    // 船公司改变事件
    modShipComChange (val) {
      console.log(val)
      this.shipBoatEirAndList.map((item, index, arr) => {
        if (val === item.boatComId) {
          this.eirCode = item.code
        }
      })
    },
    // 日账单导出
    async exportDataClick () {
      let head = {
        row: '序号',
        boxState: '状态',
        clientName: '客户名称',
        shipAgencyName: '船代',
        company: '船公司',
        boat: '船名',
        voyage: '航次',
        blno: '提单号',
        boxType: '箱型箱量',
        mome: '要求',
        putBoxNote: '放箱备注',
        yard: '提箱点',
        sumMoney: '总费用',
        ddf: '打单费',
        fwf: '服务费',
        zlhf: '中理货费',
        wlhf: '外理货费',
        gjf: '港建费',
        gzf: '港杂费',
        kdf: '快递费',
        cqf: '超期费',
        hwxf: '坏污箱费',
        ttf: '台头费',
        jhf: '计划费',
        znj: '滞纳金',
        txf: '提箱费',
        qt: '其他',
        profit: '利润',
        applyTime: '申请时间',
        updateTime: '对单时间',
        checkOutTime: '结账时间'
      }
      this.Data.page = this.page
      this.Data.num = 10000000
      if (this.Data.applyDate === [] || this.Data.applyDate === null) {
        this.Data.applyStartTime = ''
        this.Data.applyEndTime = ''
      } else {
        this.Data.applyStartTime = this.Data.applyDate[0]
        this.Data.applyEndTime = this.Data.applyDate[1]
      }
      this.loadingView = true
      const res = await importExecelData(this.Data)
      if (res.status === 200) {
        this.exportDataHear = res.data
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg
        })
      }
      this.exportDataHear.unshift(head)
      let ress = await exportData({
        fileName: '进口日账单',
        sheetName: '进口日账单',
        jsonStr: JSON.stringify(this.exportDataHear),
        comName: this.userType.FullName, // 公司名称
        comPhone: '', // 公司电话
        comFax: '', // 公司传真
        tableName: '进口日账单' // 表格标题
      })
      if (res.status === 200) {
        this.loadingView = false
        window.location.href = ress.data[0].path
      } else {
        this.loadingView = false
        this.$notify.error({
          title: '导出失败',
          message: '请联系客服!'
        })
      }
    },
    // 清空下拉内容搜索
    clearContent () {
      this.searOneSeach()
    },
    // 查看统计
    async viewStatistics () {
      if (this.Data.applyDate === null || this.Data.applyDate === []) {
        this.Data.applyStartTime = ''
        this.Data.applyEndTime = ''
      } else {
        this.Data.applyStartTime = this.Data.applyDate[0]
        this.Data.applyEndTime = this.Data.applyDate[1]
      }
      let res = await importStatistics({
        startTime: this.Data.applyStartTime,
        endTime: this.Data.applyEndTime,
        status: this.Data.boxState,
        customerName: this.Data.customerName,
        shipCoID: this.Data.shipAgencyName,
        carrierID: this.Data.company
      })
      if (res.status === 200) {
        this.statisticsData = res.data[0]
        this.statisticsType = res.boxNum
        this.sunNum = 0
        for (let i = 0; i < res.boxNum.length; i++) {
          this.sunNum += parseInt(res.boxNum[i].num)
        }
        if (this.userType === '7') {
          this.viewStatisticsVisible = true
        } else {
          this.viewStatisticsTVisible = true
        }
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg
        })
      }
    },
    close () {
      this.viewStatisticsVisible = false
    },
    closeT () {
      this.viewStatisticsTVisible = false
    },
    // closeEir () {
    //   this.eirInfoVisible = false
    // },
    // 申请时间改变搜索事件
    async applyDateChange (a) {
      if (a === null || this.Data.applyDate === null) {
        this.Data.applyStartTime = ''
        this.Data.applyEndTime = ''
      } else {
        this.Data.applyStartTime = a[0]
        this.Data.applyEndTime = a[1]
      }
      this.Data.page = 1
      this.Data.num = this.limit
      const res = await histtoryImportList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        console.log(this.tableData, '11232')
        this.total = res.count
      } else {
        this.$notify.error({
          title: '错误',
          message: '请联系客服!'
        })
      }
    },
    // 客户改变搜索事件
    async custormerChange (a) {
      this.Data.page = 1
      this.Data.num = this.limit
      this.Data.customerName = a
      const res = await histtoryImportList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
      } else {
        this.$notify.error({
          title: '错误',
          message: '请联系客服!'
        })
      }
    },
    // 船公司改变搜索事件
    async companyChange (a) {
      this.Data.page = 1
      this.Data.num = this.limit
      this.Data.company = a
      const res = await histtoryImportList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
      } else {
        this.$notify.error({
          title: '错误',
          message: '请联系客服!'
        })
      }
    },
    // 船公司改变搜索事件
    async shipAgencyNameChange (a) {
      this.Data.page = 1
      this.Data.num = this.limit
      this.Data.shipAgencyName = a
      const res = await histtoryImportList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
      } else {
        this.$notify.error({
          title: '错误',
          message: '请联系客服!'
        })
      }
    },
    // 获取船代
    async getShipName () {
      let res = await shipAgencyList()
      this.shipAgencyNameOptions = res.data
    },
    // 获取客户信息
    async getComInfo () {
      let res = await SearchUserInfo({
        num: 1000000,
        page: 1
      }
      )
      this.customerNameOptions = res.data
    },
    // 锁住状态
    tableRowClassName (a) {
      if (a.row.isLock === '1') {
        return 'lockColor'
      }
      if (a.row.boxFeeStatus === '已结账') {
        return 'boxFeeColor'
      }
    },
    // 设置费用明细
    setDetails () {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '设置失败',
          message: '请选择一条数据!'
        })
      } else if (this.selectedTableData.length === 1) {
        if (this.selectedTableData[0].isLock === '1') {
          this.$notify.error({
            title: '设置失败',
            message: '此订单已上锁!'
          })
        } else {
          this.detailsView = true
        }
      } else {
        this.$notify.error({
          title: '设置失败',
          message: '只能选择一条数据哦!'
        })
      }
    },
    dbTableClick (val) {
      if (val.isLock === '0') {
        this.selectedTableDataAlone = val
        this.detailsView = true
      } else {
        this.$notify.error({
          title: '设置失败',
          message: '此数据已锁定，无法修改费用!'
        })
      }
    },
    // 业务锁定未锁定
    async lockUnlock (index) {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '设置失败',
          message: '请选择一条数据!'
        })
      } else if (this.selectedTableData.length === 1) {
        let res = await importLockUnlock({
          codeList: this.selectedTableData,
          isLock: index
        })
        if (res.status === 200) {
          this.$notify({
            title: '修改成功',
            message: '修改成功',
            type: 'success'
          })
          this.searSeach()
        } else {
          this.$notify.error({
            title: '修改失败',
            message: res.msg
          })
        }
      } else {
        this.$notify.error({
          title: '设置失败',
          message: '只能选择一条数据哦!'
        })
      }
    },
    async getUserInfo () {
      let res = await userInfo()
      this.userType = res.data[0].userType
    },
    // 状态更改
    async opMatchOrder (a) {
      if (this.selectedTableData.length === 0) {
        this.$notify.error({
          title: '设置失败',
          message: '请选择数据!'
        })
      } else {
        let res = await importMatchOrder({
          codeList: this.selectedTableData,
          boxState: a
        })
        if (res.status === 200) {
          this.$notify({
            title: '修改成功',
            message: '修改成功',
            type: 'success'
          })
          this.searSeach()
        } else {
          this.$notify.error({
            title: '修改失败',
            message: res.msg
          })
        }
      }
    },
    setmySales (row, column, cell, event) {
      const target = event
      this.modRow = row
      if (column.label === '放箱备注') {
        this.modStatus = 1
        this.modPutBoxNote = row.putBoxNote
        this.showPopoverHandler(target, row.userCode, column.label)
      } else if (column.label === '送箱点') {
        this.modStatus = 2
        this.modYard = row.yard
        this.showPopoverHandler(target, row.userCode, column.label)
      } else if (column.label === '对单时间') {
        this.modStatus = 3
        this.modSheetTime = row.updateTime
        this.showPopoverHandler(target, row.userCode, column.label)
      } else if (column.label === '结费状态') {
        this.modStatus = 4
        this.modBoxFeeStatus = row.boxFeeStatus
        this.showPopoverHandler(target, row.userCode, column.label)
      } else if (column.label === '交单码') {
        this.modStatus = 5
        this.modPCode = row.pCode
        this.showPopoverHandler(target, row.userCode, column.label)
      }
    },
    closePopoverHandler () {
      this.cacheId = ''
      this.cacheColumnLabel = ''
      this.showPopover = false
    },
    // 绑定显示popover方法
    showPopoverHandler (element, id, label) {
      // 显示、隐藏条件
      if (this.cacheId === id && this.cacheColumnLabel === label) {
        this.showPopover = !this.showPopover
        return
      } else {
        this.cacheId = id
        this.cacheColumnLabel = label
        this.showPopover = true
      }
      // 设置popover样式
      const popper = this.$refs.operationPopover.$refs.popper
      if (this.showPopover) {
        setTimeout(() => {
          const left = element.clientX
          const top = element.clientY
          popper.setAttribute('style', `position: fixed; top: ${top - 70}px; left: ${left - 120}px;`)
        }, 100) // 100ms延迟,等待dom渲染
      } else {
        popper.removeAttribute('style')
      }
    },
    // 修改对单时间
    async modUpTime () {
      let res = await singleTime({
        time: this.modSheetTime,
        userCode: this.modRow.userCode,
        type: this.modRow.type
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success'
        })
        this.closePopoverHandler()
        this.searSeach()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg
        })
      }
    },
    detailsViewVisibleChange (value) {
      this.detailsView = value
    },
    // 修改放箱备注
    async setPutBoxNote () {
      let res = await importUpdatePutBoxNote({
        putBoxNote: this.modPutBoxNote,
        userCode: this.modRow.userCode
        // type: this.modRow.type
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success'
        })
        this.closePopoverHandler()
        this.searSeach()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg
        })
      }
    },
    yardChange (val) {
      this.modYard = val
      this.yardOptions.map((item, index, arr) => {
        if (val === item.yardName) {
          this.modYardId = item.yardId
        }
      })
    },
    // 获取堆场
    async getYard () {
      let res = await yardList({
        code: '',
        yardName: '',
        yardArea: '',
        phoneNumber: ''
      })
      this.yardOptions = res.data
    },
    // 修改堆场
    async modGYard () {
      let res = await importUpdateYard({
        userCode: this.modRow.userCode,
        blno: this.modRow.blno,
        yardName: this.modYard,
        yardId: this.modYardId,
        shipAgencyId: this.modRow.shipAgencyId,
        boatComId: this.modRow.boatAgentId
      })
      if (res.status === 200) {
        this.$notify({
          title: '修改成功',
          message: '修改成功',
          type: 'success'
        })
        this.closePopoverHandler()
        this.searSeach()
      } else {
        this.$notify.error({
          title: '修改失败',
          message: res.msg
        })
      }
    },
    createFilter (queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
      }
    },
    tableRowClass ({row, column, rowIndex, columnIndex}) {
      if (column.property === 'boxState') {
        if (row.status === '派单') {
          switch (row.boxState) {
            case '已完成':
              return 'color: #67C23A; font-weight: 700'
            default:
              return 'color: gary; font-weight: 700'
          }
        }
      }
      if (column.property === 'boxState') {
        switch (row.boxState) {
          case '0':
            return 'color: red; font-weight: 700'
          case '放单中':
            return 'color: #67C23A; font-weight: 700'
          case '已完成':
            return 'color: #909399; font-weight: 700'
          case '已拒绝':
            return 'color: #E6A23C; font-weight: 700'
          case '没预配':
            return 'color: red; font-weight: 700'
          case '船期早':
            return 'color: #67C23A; font-weight: 700'
          case '明天放':
            return 'color: #909399; font-weight: 700'
          case '已退关':
            return 'color: #E6A23C; font-weight: 700'
          case '等通知':
            return 'color: #67C23A; font-weight: 700'
          case '客户取消':
            return 'color: #909399; font-weight: 700'
          case '退单':
            return 'color: #F56C6C; font-weight: 700'
          case '申请中':
            return 'color: #F56C6C; font-weight: 700'
          case '爆仓':
            return 'color: #E6A23C; font-weight: 700'
          case '有问题':
            return 'color: #67C23A; font-weight: 700'
          case '缺箱子':
            return 'color: #909399; font-weight: 700'
          case '换单中':
            return 'color: #F56C6C; font-weight: 700'
          case '已对单':
            return 'color: #F56C6C; font-weight: 700'
          default:
            return 'color: gary; font-weight: 700'
        }
      } else if (column.property === 'yard') {
        switch (row.yard) {
          case '地中海捷运洋山':
            return 'color: red; font-weight: 700'
          case '地中海捷运洋山堆场':
            return 'color: red; font-weight: 700'
          case '东方海外仓储（上海）有限公司':
            return 'color: red; font-weight: 700'
          case '东华洋山':
            return 'color: red; font-weight: 700'
          case '东华八':
            return 'color: red; font-weight: 700'
          case '东森千祥':
            return 'color: red; font-weight: 700'
          case '东森芦潮港':
            return 'color: red; font-weight: 700'
          case '洋山四号':
            return 'color: red; font-weight: 700'
          case '洋山三期':
            return 'color: red; font-weight: 700'
          case '洋山一期':
            return 'color: red; font-weight: 700'
          case '拓瑞堆场':
            return 'color: red; font-weight: 700'
          case '新霸达洋山':
            return 'color: red; font-weight: 700'
          case '宜欧堆场':
            return 'color: red; font-weight: 700'
          case '毅发芦潮港':
            return 'color: red; font-weight: 700'
          case '洋山储运':
            return 'color: red; font-weight: 700'
          case '紫东洋山':
            return 'color: red; font-weight: 700'
          case '安吉上港码头':
            return 'color: red; font-weight: 700'
          case '上港新港':
            return 'color: red; font-weight: 700'
          case '上港新港堆场':
            return 'color: red; font-weight: 700'
          case '上港云众堆场':
            return 'color: red; font-weight: 700'
          case '上港海港':
            return 'color: red; font-weight: 700'
          case '创元洋山':
            return 'color: red; font-weight: 700'
          case '创元洋山2堆场':
            return 'color: red; font-weight: 700'
          case '德威五':
            return 'color: red; font-weight: 700'
          case '德威四':
            return 'color: red; font-weight: 700'
          case '东亚洋山':
            return 'color: red; font-weight: 700'
          case '立昌芦潮港堆场':
            return 'color: red; font-weight: 700'
          case '立昌芦潮':
            return 'color: red; font-weight: 700'
          case '立昌芦潮港':
            return 'color: red; font-weight: 700'
          case '普捷通堆场':
            return 'color: red; font-weight: 700'
          case '普捷通一堆场':
            return 'color: red; font-weight: 700'
          case '普捷通一':
            return 'color: red; font-weight: 700'
          case '洋山普捷通':
            return 'color: red; font-weight: 700'
          case '象屿胜狮（上海）堆场':
            return 'color: red; font-weight: 700'
          case '泰聚堆场':
            return 'color: red; font-weight: 700'
          case '中集洋山':
            return 'color: red; font-weight: 700'
          case '中远集发临港':
            return 'color: red; font-weight: 700'
          case '宜隆堆场':
            return 'color: red; font-weight: 700'
          case '中集振洋':
            return 'color: red; font-weight: 700'
          case '珉钧芦潮港':
            return 'color: red; font-weight: 700'
          case '上港外运冠东堆场':
            return 'color: red; font-weight: 700'
          case '东森洋山':
            return 'color: red; font-weight: 700'
          case '中海洋山':
            return 'color: red; font-weight: 700'
          case '华裕洋山堆场':
            return 'color: red; font-weight: 700'
          case '拓瑞洋山':
            return 'color: red; font-weight: 700'
          case '朝华洋山':
            return 'color: red; font-weight: 700'
          case '洋山千祥':
            return 'color: red; font-weight: 700'
          case '洋山四号（尚东自动化码头）':
            return 'color: red; font-weight: 700'
          case '洋山四期':
            return 'color: red; font-weight: 700'
          case '洋山盛东':
            return 'color: red; font-weight: 700'
          case '洋山礼才':
            return 'color: red; font-weight: 700'
          case '洋山自动化码头':
            return 'color: red; font-weight: 700'
          case '立昌洋山':
            return 'color: red; font-weight: 700'
          case '上港外运尚东堆场':
            return 'color: red; font-weight: 700'
          case '冠东（洋三）堆场':
            return 'color: red; font-weight: 700'
          case '中集洋山堆场':
            return 'color: red; font-weight: 700'
          case '东方海外仓储':
            return 'color: red; font-weight: 700'
          case '上港外运盛东堆场':
            return 'color: red; font-weight: 700'
          case '鑫三利云众':
            return 'color: red; font-weight: 700'
          case '华裕洋山四堆场':
            return 'color: red; font-weight: 700'
          case '洋一':
            return 'color: red; font-weight: 700'
          case '洋三':
            return 'color: red; font-weight: 700'
          case '洋四':
            return 'color: red; font-weight: 700'
          case '胜狮冷柜':
            return 'color: red; font-weight: 700'
          case '胜师（上海）':
            return 'color: red; font-weight: 700'
          default:
            return 'color: #3c8dbc; font-weight: 700'
        }
      } else if (column.label === '放箱备注' || column.label === '提箱点' || column.label === '对单时间' || column.label === '结费状态' || column.label === '交单码') {
        return 'color: #3c8dbc'
      } else if (column.label === '船代' || column.label === '船公司' || column.label === '船名' || column.label === '航次' || column.label === '提单号' || column.label === '尺寸' || column.label === '箱型' || column.label === '数量' || column.label === '放箱备注' || column.label === '制单码' || column.label === '提箱点') {
        return 'padding: 0px 5px !important;'
      } else {
        return ''
      }
    },
    async getBoatCom () {
      let res = await boatCompanyList({
        nameCncode: ''
      })
      this.chuangongshiOptions = res.data
    },
    // 选中表格
    handleSelectionChange (val) {
      this.selectedTableData = val
      this.selectedTableDataAlone = val[0]
    },
    async gitBoxHistoryData () {
      if (this.Data.applyDate === [] || this.Data.applyDate === null) {
        this.Data.applyStartTime = ''
        this.Data.applyEndTime = ''
      } else {
        this.Data.applyStartTime = this.Data.applyDate[0]
        this.Data.applyEndTime = this.Data.applyDate[1]
      }
      let res = await histtoryImportList({
        page: this.page,
        num: this.limit,
        boxState: this.Data.boxState,
        boxFeeStatus: '-1',
        applyStartTime: this.Data.applyStartTime,
        applyEndTime: this.Data.applyEndTime
      })
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
        this.getUserInfo()
        this.getBoatCom()
        this.getShipName()
        this.getYard()
        this.getComInfo()
        this.getBoatAndBoatT()
      } else {
        this.$notify.error({
          title: '错误',
          message: '请联系客服!'
        })
      }
    },
    clearSeach () {
      this.Data.applyDate = []
      this.Data.shipAgencyName = ''
      this.Data.company = ''
      this.Data.customerName = ''
      this.Data.boxState = '-1'
      this.Data.blno = ''
      this.page = 1
      this.searOneSeach()
    },
    async searSeach () {
      this.Data.page = this.page
      this.Data.num = this.limit
      if (this.Data.applyDate === [] || this.Data.applyDate === null) {
        this.Data.applyStartTime = ''
        this.Data.applyEndTime = ''
      } else {
        this.Data.applyStartTime = this.Data.applyDate[0]
        this.Data.applyEndTime = this.Data.applyDate[1]
      }
      const res = await histtoryImportList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
      } else {
        this.$notify.error({
          title: '错误',
          message: '请联系客服!'
        })
      }
    },
    async searOneSeach () {
      this.Data.page = 1
      this.Data.num = this.limit
      if (this.Data.applyDate === [] || this.Data.applyDate === null) {
        this.Data.applyStartTime = ''
        this.Data.applyEndTime = ''
      } else {
        this.Data.applyStartTime = this.Data.applyDate[0]
        this.Data.applyEndTime = this.Data.applyDate[1]
      }
      const res = await histtoryImportList(this.Data)
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
      } else {
        this.$notify.error({
          title: '错误',
          message: '请联系客服!'
        })
      }
    },
    handleSizeChange (val) {
      this.limit = val
      this.searSeach()
    },
    handleCurrentChange (val) {
      this.page = val
      this.searSeach()
    },
    parentName () {
      this.searSeach()
      this.getSettingList('进口放箱汇总')
    },
    async defaultData (mylist, pgnm) {
      const res = await setputBoxFieldOrder({
        pageName: pgnm,
        fieldList: mylist
      })
      if (res.status === 200) {
        this.getSettingList(pgnm)
      } else {
        this.$notify({
          title: '出现错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 获取设置列表
    async getSettingList (pgnm) {
      this.pageName = pgnm
      const res = await getField({
        pageName: pgnm
      })
      if (res.status === 200) {
        if (res.data.length === 0) {
          let myList = [
            { field: '序号', props: 'row', isShow: 0, width: 35 },
            { field: '状态', props: 'boxState', isShow: 0, width: 50 },
            { field: '结费状态', props: 'boxFeeStatus', isShow: 0, width: 60 },
            { field: '用箱人', props: 'clientName', isShow: 0, width: 75 },
            { field: '船代', props: 'shipAgencyName', isShow: 0, width: 75 },
            { field: '船公司', props: 'company', isShow: 0, width: 103 },
            { field: '船名', props: 'boat', isShow: 0, width: 190 },
            { field: '航次', props: 'voyage', isShow: 0, width: 90 },
            { field: '提单号', props: 'blno', isShow: 0, width: 165 },
            { field: '箱型箱量', props: 'boxType', isShow: 0, width: 130 },
            { field: '要求', props: 'mome', isShow: 0, width: 130 },
            { field: '放箱备注', props: 'putBoxNote', isShow: 0, width: 130 },
            { field: '送箱点', props: 'yard', isShow: 0, width: 125 },
            { field: '总费用', props: 'sumMoney', isShow: 0, width: 80 },
            { field: '打单费', props: 'ddf', isShow: 0, width: 80 },
            { field: '服务费', props: 'fwf', isShow: 0, width: 80 },
            { field: '中理货费', props: 'zlhf', isShow: 0, width: 80 },
            { field: '外理货费', props: 'wlhf', isShow: 0, width: 80 },
            { field: '港建费', props: 'gjf', isShow: 0, width: 80 },
            { field: '港杂费', props: 'gzf', isShow: 0, width: 80 },
            { field: '快递费', props: 'kdf', isShow: 0, width: 80 },
            { field: '超期费', props: 'cqf', isShow: 0, width: 80 },
            { field: '坏污箱费', props: 'hwxf', isShow: 0, width: 80 },
            { field: '台头费', props: 'ttf', isShow: 0, width: 80 },
            { field: '计划费', props: 'jhf', isShow: 0, width: 80 },
            { field: '滞纳金', props: 'znj', isShow: 0, width: 80 },
            { field: '提箱费', props: 'txf', isShow: 0, width: 80 },
            { field: '其他', props: 'qt', isShow: 0, width: 80 },
            { field: '成本费用', props: 'shipAgencyFee', isShow: 0, width: 80 },
            { field: '打单费', props: 'costDdf', isShow: 0, width: 80 },
            { field: '服务费', props: 'costFwf', isShow: 0, width: 80 },
            { field: '中理货费', props: 'costZlhf', isShow: 0, width: 80 },
            { field: '外理货费', props: 'costWlhf', isShow: 0, width: 80 },
            { field: '港建费', props: 'costGjf', isShow: 0, width: 80 },
            { field: '港杂费', props: 'costGzf', isShow: 0, width: 80 },
            { field: '快递费', props: 'costKdf', isShow: 0, width: 80 },
            { field: '超期费', props: 'costCqf', isShow: 0, width: 80 },
            { field: '坏污箱费', props: 'costHwxf', isShow: 0, width: 80 },
            { field: '台头费', props: 'costTtf', isShow: 0, width: 80 },
            { field: '计划费', props: 'costJhf', isShow: 0, width: 80 },
            { field: '滞纳金', props: 'costZnj', isShow: 0, width: 80 },
            { field: '提箱费', props: 'costTxf', isShow: 0, width: 80 },
            { field: '其他', props: 'costQt', isShow: 0, width: 80 },
            { field: '利润', props: 'profit', isShow: 0, width: 80 },
            { field: 'EirNo', props: 'eirNo', isShow: 0, width: 150 },
            { field: '交单码', props: 'pCode', isShow: 0, width: 130 },
            { field: '做箱时间', props: 'startTime', isShow: 0, width: 120 },
            { field: '申请时间', props: 'applyTime', isShow: 0, width: 120 },
            { field: '对单时间', props: 'updateTime', isShow: 0, width: 100 },
            { field: '到港时间', props: 'timeArrival', isShow: 0, width: 120 },
            { field: '结账时间', props: 'checkOutTime', isShow: 0, width: 120 },
            { field: '业务员', props: 'fullName', isShow: 0, width: 100 },
            { field: '业务状态', props: 'status', isShow: 0, width: 60 },
            { field: '港区', props: 'port', isShow: 0, width: 150 }
          ]
          this.defaultData(myList, pgnm)
        } else {
          res.data.map((item, index) => {
            if (item.isShow === '0') {
              item.isShow = true
            } else {
              item.isShow = false
            }
          })
          this.fieldList = res.data
          this.key = true
        }
      } else {
        this.$notify({
          title: '出现错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 子组件方法
    closeL () {
      this.open = false
    },
    // 打开列表设置
    tableSetting () {
      this.getSettingList(this.pageName)
      if (this.key) {
        this.open = true
      }
    }
  }
}
</script>

<style lang="less">
.import-box-man-history {
  .el-button+.el-button {
    margin-left: 5px;
  }
  .icon {
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    cursor: pointer;
  }
  .lockColor {
    background: #f3e3e3,
  }
  .boxFeeColor {
    color: red,
  }
  .icon-locking {
  background-image: url(../../assets/locking.png)
  }
  .icon-unlock {
  background-image: url(../../assets/unlock.png)
  }
  .el-form-item {
    margin-bottom: 5px;
  }
  .el-table td, .el-table th {
    padding: 0;
  }

.el-input__inner {
    width: 136px;
    height: 28px;
    line-height: 28px;
  }
  .pagenation {
  margin-left: 20px;
  font-size: 14px;
  input {
    width: 100px
  }
}
.oper-row {
  position: relative;
  padding: 5px 0;
  &.filter {
    .right {
      padding-left: 80px;
    }
  }
  .label {
    position: absolute;
    margin-right: 20px;
    display: inline-block;
    top: 8px;
    left: 0;
  }
  .right {
    padding-left: 30px;
    >* {
      margin-top: 5px;
    }
    span {
      cursor: pointer;
    }
  }
}
}
</style>
